<template>
  <div class="foSi14" style="padding-top: 30px;">
    <div class="mar" style="width: 840px;">
      <div class="wid100 dis disAl disJuB hei30">
        <div class="dis disAl">
          <div class="foSi16">
            <span>{{ venue?venue.name:'' }}</span>
            <span class="mar-left5 ">当前短信余额：<span
              class="foSi24"
              style="color: #f49352;"
            >{{ list.message_num }}</span>条</span>
          </div>
        </div>
        <div class="dis disAl">
          <!--					<div class="dis disAl cuPo" style="color: #48a9f3;" @click.stop="tiaozhuan('/sms/smsRecord')">-->
          <!--						<svg-icon icon-class="top-up-record" class="mar0" style="width: 19px;height: 19px;" />-->
          <!--						<div class="mar-left5">充值记录</div>-->
          <!--					</div>-->
          <div
            class="dis disAl cuPo mar-left20"
            style="color: #48a9f3;"
            @click.stop="tiaozhuan('/sms/smsSendRecord')"
          >
            <svg-icon icon-class="skill" class="mar0" style="width: 19px;height: 19px;fill: #48a9f3;" />
            <div class="mar-left5">短信发送记录</div>
          </div>
        </div>
      </div>
      <div class="title mar-top30">{{ list.tips }}</div>
      <div class="dis disAl item-l item-p hei44">
        <el-checkbox-group v-model="list.message_desens" @change="tmchange">
          <el-checkbox label="1">课程信息</el-checkbox>
          <el-checkbox label="2">会员卡种类</el-checkbox>
          <el-checkbox label="3">场馆名称</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="title mar-top30">团课业务提醒</div>
      <div
        v-for="(item,index) in list.group_class"
        :key="index+'a'"
        class="dis disAl disJuB item-l item-p hei44 poRel mar-bott5"
      >
        <el-checkbox
          v-model="item.state"
          :true-label="1"
          :false-label="0"
          @change="choiceme(item)"
        >{{ item.title }}</el-checkbox>
        <el-popover
          v-model="item.is_open"
          popper-class=".monitor-yt-popover2"
          placement="bottom"
          width="340"
          trigger="click"
        >
          <div class="sms-tpl-box poRel">
            <svg-icon
              icon-class="svg-close"
              class="mar0 poAbs"
              style="width: 20px;height: 20px;top: 10px;right: 10px;"
              @click.stop="item.is_open = false"
            />
            <div class="dis disJuB wid100">
              <div style="width: 36px;height: 36px;">
                <svg-icon icon-class="svg-eg" class="mar0 wh100" />
              </div>
              <div class="" style="width: 270px;">{{ item.content }}</div>
            </div>
          </div>
          <div slot="reference" class="cuPo" style="color: #41c3a8;">查看模板信息</div>
        </el-popover>
      </div>

      <div class="title mar-top30">精品课业务提醒</div>
      <div
        v-for="(item,index) in list.classic_course"
        :key="index+'b'"
        class="dis disAl disJuB item-l item-p hei44 poRel mar-bott5"
      >
        <el-checkbox
          v-model="item.state"
          :true-label="1"
          :false-label="0"
          @change="choiceme(item)"
        >{{ item.title }}</el-checkbox>
        <el-popover
          v-model="item.is_open"
          popper-class=".monitor-yt-popover2"
          placement="bottom"
          width="340"
          trigger="click"
        >
          <div class="sms-tpl-box poRel">
            <svg-icon
              icon-class="svg-close"
              class="mar0 poAbs"
              style="width: 20px;height: 20px;top: 10px;right: 10px;"
              @click.stop="item.is_open = false"
            />
            <div class="dis disJuB wid100">
              <div style="width: 36px;height: 36px;">
                <svg-icon icon-class="svg-eg" class="mar0 wh100" />
              </div>
              <div class="" style="width: 270px;">{{ item.content }}</div>
            </div>
          </div>
          <div slot="reference" class="cuPo" style="color: #41c3a8;">查看模板信息</div>
        </el-popover>
      </div>
      <div class="title mar-top30">私教课业务提醒</div>
      <div
        v-for="(item,index) in list.private_classes"
        :key="index+'c'"
        class="dis disAl disJuB item-l item-p hei44 poRel mar-bott5"
      >
        <el-checkbox
          v-model="item.state"
          :true-label="1"
          :false-label="0"
          @change="choiceme(item)"
        >{{ item.title }}</el-checkbox>
        <el-popover
          v-model="item.is_open"
          popper-class=".monitor-yt-popover2"
          placement="bottom"
          width="340"
          trigger="click"
        >
          <div class="sms-tpl-box poRel">
            <svg-icon
              icon-class="svg-close"
              class="mar0 poAbs"
              style="width: 20px;height: 20px;top: 10px;right: 10px;"
              @click.stop="item.is_open = false"
            />
            <div class="dis disJuB wid100">
              <div style="width: 36px;height: 36px;">
                <svg-icon icon-class="svg-eg" class="mar0 wh100" />
              </div>
              <div class="" style="width: 270px;">{{ item.content }}</div>
            </div>
          </div>
          <div slot="reference" class="cuPo" style="color: #41c3a8;">查看模板信息</div>
        </el-popover>
      </div>
      <div class="title mar-top30">班课业务提醒</div>
      <div
        v-for="(item,index) in list.class_lessons"
        :key="index+'d'"
        class="dis disAl disJuB item-l item-p hei44 poRel mar-bott5"
      >
        <el-checkbox
          v-model="item.state"
          :true-label="1"
          @change="choiceme(item)"
        >{{ item.title }}</el-checkbox>
        <el-popover
          v-model="item.is_open"
          popper-class=".monitor-yt-popover2"
          placement="bottom"
          width="340"
          trigger="click"
        >
          <div class="sms-tpl-box poRel">
            <svg-icon
              icon-class="svg-close"
              class="mar0 poAbs"
              style="width: 20px;height: 20px;top: 10px;right: 10px;"
              @click.stop="item.is_open = false"
            />
            <div class="dis disJuB wid100">
              <div style="width: 36px;height: 36px;">
                <svg-icon icon-class="svg-eg" class="mar0 wh100" />
              </div>
              <div class="" style="width: 270px;">{{ item.content }}</div>
            </div>
          </div>
          <div slot="reference" class="cuPo" style="color: #41c3a8;">查看模板信息</div>
        </el-popover>
      </div>
      <div class="title mar-top30">会员卡业务提醒</div>
      <div
        v-for="(item,index) in list.card_notice"
        :key="index+'e'"
        class="dis disAl disJuB item-l item-p hei44 poRel mar-bott5"
      >
        <el-checkbox
          v-model="item.state"
          :true-label="1"
          :false-label="0"
          @change="choiceme(item)"
        >{{ item.title }}</el-checkbox>
        <el-popover
          v-model="item.is_open"
          popper-class=".monitor-yt-popover2"
          placement="bottom"
          width="340"
          trigger="click"
        >
          <div class="sms-tpl-box poRel">
            <svg-icon
              icon-class="svg-close"
              class="mar0 poAbs"
              style="width: 20px;height: 20px;top: 10px;right: 10px;"
              @click.stop="item.is_open = false"
            />
            <div class="dis disJuB wid100">
              <div style="width: 36px;height: 36px;">
                <svg-icon icon-class="svg-eg" class="mar0 wh100" />
              </div>
              <div class="" style="width: 270px;">{{ item.content }}</div>
            </div>
          </div>
          <div slot="reference" class="cuPo" style="color: #41c3a8;">查看模板信息</div>
        </el-popover>
      </div>
      <div class="hei30" />
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  lists,
  check_message
} from '@/api/sms'
export default {
  name: 'SmsSetting',
  components: {},
  data() {
    return {
      list: null,
      venue: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    this.venue = JSON.parse(localStorage.getItem('venue'))
    var xuanList = [{
      name: '自动发送短信配置',
      url: '/sms/smsSetting',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  methods: {
    choiceme(e) {
      var data = {
        type: 1,
        message_id: e.id
      }
      check_message(data).then(response => {
        const {
          data
        } = response
        console.log(data)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    tmchange(e) {
      console.log(e)
      var data = {
        type: 2,
        message_desens: this.list.message_desens.join(',')
      }
      check_message(data).then(response => {
        const {
          data
        } = response
        console.log(data)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    tiaozhuan(url) {
      this.$router.push({
        path: url
      })
    },
    getList() {
      var data = {}
      lists(data).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.list = data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>

<style>
	..monitor-yt-popover2 {
		padding: 0;
		border: 0;
		right: 0;
	}

	..monitor-yt-popover2 .popper__arrow::after {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.title {
		height: 22px;
		font-size: 12px;
		color: #787878;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #41c3a8;
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.sms-tpl-box {
		width: 340px;
		padding: 50px 30px;
		background: #fff;
		box-shadow: 0 0 24px 0 #ebedef;
		box-sizing: border-box;
	}
</style>
